<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
      
       <style>
         *{ padding:0; margin:0;}
       .box{ width:200px; height:200px; background-color:red; }
        /* max-width:500px表示屏幕宽度小于或等于500px时，才会应用下面的样式 */
       @media screen and (max-width: 500px) {
        .box{background-color: aqua;}
       }
       /* min-width:500px表示屏幕宽度大于或等于500px时，才会应用下面的样式 */
       @media screen and (min-width: 500px) {
        .box{background-color: green; width: 700px;}
       }
       /* min-width:900px表示屏幕宽度大于或等于900px时，并且小于1199px时，才会应用下面的样式 */
       @media screen and (min-width : 900px) and (max-width: 1199px ) {
        .box{background-color: blue;}
        }
      
       /* min-width:1200px表示屏幕宽度大于或等于1200px时，才会应用下面的样式 */
       @media screen and (min-width: 1200px) {
        .box{background-color: yellow;}
       }
       /* min-width:500px表示屏幕宽度大于或等于500px时，才会应用下面的样式 */
      
       /* 上面这个条件不也好，因为当屏幕是1300px时，它即满足大于500px的条件，又满足大于900px的条件，但它会应用最后一个条件的样式,
       同时会覆盖掉前面三个条件的样式，但也会保留min-width: 500px的样式width: 700px; */
       @media screen and (min-width: 500px) {
        .box{background-color: green; width: 700px;}
       }
       /*如果把 min-width: 500px放到最后，这样在1000px13000px等的时候，又都是只有绿色了。 */
       /* 另外，如果有多个条件同时满足时，从后向前匹配，一旦匹配成功则终止，会应用最后一个条件的样式，比如： */
       /* 所以，为了避免这种情况，可以规定好min-width: 500px，同时规定好max-width: 的样式放。 */
       </style>
</head>
<body>
    <div class="box">
        新视觉实习基地。
    </div>
    
</body>
</html>